import classNames from 'classnames';
import styles from './index.less';
import { useState } from 'react';

const Index = ({ src, width = 'auto', height = 'auto', text, className = '' }) => {
  const [show, setShow] = useState(false);
  return (
    <div className={classNames(styles.image, className)}>
      <img
        src={src}
        className={styles.img}
        width={width}
        height={height}
        onClick={() => setShow(true)}
      />
      {show && (
        <div className={styles.priview} onClick={() => setShow(false)}>
          <i className={styles.close} />
          <img loading="lazy" src={src} className={styles.priviewImg} alt="" />
          {text && (
            <div className={styles.text} onClick={(e) => e.stopPropagation()}>
              {text}
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default Index;
